<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page import="java.util.*" %>
<%@ page import="category.*"  %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<%
	CategoryManager category = CategoryManager.getInstance();
	int cateCnt = category.count();
	List<Category> cateList = category.selectList();
	int menuWidth = (900 - (3*cateCnt)) / cateCnt;
%>

<c:set var="cateCnt" value="<%=cateCnt%>" />
<c:set var="cateList" value="<%=cateList%>" />
<c:set var="menuWidth" value="<%=menuWidth%>" />

<style type="text/css">
	ul { list-style:none; position:relative; float:left; padding-left:3px;}
	ul li { color:white; font-size:14px; width:${menuWidth }px; border:1px solid #ffffff; margin:1px 0 0 0; float:left;}
	ul li a{ color:white; display:block; font-weight:bold; text-decoration: none; padding:10px; }
	
	.rollover, ._rollover {background:#000000; color:#ffffff;}
	.rollover-over{ background:#cccccc;}
	.rollover-over a{ color:#ffffff;}
	.rollover-down{ background:#DDDDDD;}
	.rollover-down a{ color:#0075c8;}
	
	.rollover .default{display:block}
	.rollover-over .default{display:none}
	.rollover .cOver{display:none}
	.rollover-over .cOver{display:block}
	.rollover-down .cOver{display:none}
	.rollover .cDown{display:none}
	.rollover-down .cDown{display:block}

	a.default:link, a.default:visited, a.default:active { text-decoration:none; color:#ffffff; }
	a.default:hover { text-decoration:none; color:#ffffff; }

	a.cOver:link, a.cOver:visited, a.cOver:active { text-decoration:none; color:#000000; }
	a.cOver:hover { text-decoration:none; color:#000000; }

</style>

<table width="900" border="0" align="center" cellspacing="0" cellpadding="0" class="top_menu">
<tr>
	<td align="center">
	<ul>
	<c:forEach var="topmenu" items="${cateList }">
		<c:if test="${topmenu.cate_big_code == param.MCD }">
		<c:set var="MENU_NAME" value="${topmenu.cate_big_name }"/>
		</c:if>
	    <li class="rollover">
			<a class="default" href="${WEB_ROOT }/goods/goodsList.jsp?MCD=${topmenu.cate_big_code}">${topmenu.cate_big_name}</a>
			<a class="cOver" href="${WEB_ROOT }/goods/goodsList.jsp?MCD=${topmenu.cate_big_code}">${topmenu.cate_big_name}</a>
		</li>
	</c:forEach>
	</ul>
	</td>
</tr>
</table>

<script type="text/javascript" charset="utf-8" src="${WEB_ROOT }/js/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="${WEB_ROOT }/js/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="${WEB_ROOT }/js/jindo.UIComponent.js"></script>
<script type="text/javascript" charset="utf-8" src="${WEB_ROOT }/js/jindo.RolloverArea.js"></script>
<script type="text/javascript">
	var oRolloverArea = new jindo.RolloverArea(document.body, {
		sClassName : 'rollover', // (String) 컴포넌트가 적용될 엘리먼트의 class 명. 상위 기준 엘리먼트의 자식 중 해당 클래스명을 가진 모든 엘리먼트에 Rollover 컴포넌트가 적용된다.
		bCheckMouseDown : false,
		htStatus : {
			sOver : "over",
			sDown : "down"
		}
	});
</script>

